<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no;email=no" name="format-detection">
    <title>确认订单</title>

    <link rel="stylesheet" href="../../static/css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/lib/main.css">
    <link rel="stylesheet" href="../../static/css/module/header.css">
    <link rel="stylesheet" href="../../static/css/module/footer.css">
    <link rel="stylesheet" href="../../static/css/plugin/iconfont.css">
    <link rel="stylesheet" href="../../static/css/page/orderConfirm.css">
    <link rel="stylesheet" href="../../static/css/page/store.css">
</head>
<body>
    <div class="wrapper">
        <!-- 头部 -->
        <header class="hidden-xs">
            <nav class="mainnav">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
                            <ul class="nav nav-pills topnav" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a href="#">活动报名</a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a href="#">楚才书店</a>
                                </li>
                                <li class="logo-item">
                                    <img src="../../static/images/logo.png" width="105" height="104" alt="logo">
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a href="#">个人中心</a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a href="#">登录/注册</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </header>

        <!-- 正文内容 -->
        <div class="container">
            <div class="main-content main-content--inner">
                <h1 class="main-title main-title--inner"><span>确认订单</span></h1>
                <div class="row">
                    <!-- 新建收货地址 -->
                    <div class="fill-address" style="display:none" id="addressCreateDIV">
                        <div class="col-sm-6 col-sm-offset-3">
                            <form class="form-address form-horizontal clearfix form-address--center" role="form">
                                <div class="form-group">
                                    <label for="receiver" class="col-sm-3 control-label">收货人:</label>
                                    <div class="col-sm-9 input-txt">
                                        <input type="text" class="form-control" id="receiver" name="receiver" placeholder="请输入收货人姓名">
                                    </div>
                                    <div class="line-alert line-alert--apply js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的姓名</div>
                                </div>
                                <div class="form-group">
                                    <label for="receiverPhone" class="col-sm-3 control-label">手机号:</label>
                                    <div class="col-sm-9 input-txt">
                                        <input type="text" class="form-control" id="receiverPhone" name="receiverPhone" placeholder="请输入手机号">
                                    </div>
                                    <div class="line-alert line-alert--apply js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的手机号</div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">收货地址:</label>
                                    <div class="col-sm-3 select-address">
                                        <select class="form-control">
                                            <option>湖北省</option>
                                            <option>湖北省</option>
                                            <option>湖北省</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-3 select-address select-address--city">
                                        <select class="form-control">
                                            <option>武汉市</option>
                                            <option>武汉市</option>
                                            <option>武汉市</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-3 select-address">
                                        <select class="form-control">
                                            <option>武昌区</option>
                                            <option>江岸区</option>
                                            <option>江汉区</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="address" class="col-sm-3 control-label">详细地址:</label>
                                    <div class="col-sm-9 input-txt">
                                        <textarea class="col-sm-12 form-control--txt" id="address" name="address" placeholder="建议您如实填写详细收货地址"></textarea>
                                    </div>
                                    <div class="line-alert line-alert--apply js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的收货地址</div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-9 input-txt col-sm-offset-3">
                                        <input type="checkbox" class="" name="isDefault" value="1"><span class="control-label">设为默认地址</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="btn-groups btn-groups--address">
                                        <button class="btn btn-submit col-sm-9 col-sm-offset-3" type="button" id="btnCreateConfirm">确认收货地址</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div style="display: none" id="addressModifyDIV">
                        <!-- 选择收货地址列表 -->
                        <div class="addressList">
                            <table class="table table-body">
                                <colgroup>
                                    <col style="width:10%">
                                    <col style="width:12%">
                                    <col style="width:36%">
                                    <col style="width:20%">
                                    <col style="width:22%">
                                </colgroup>
                                <tbody class="table-body__cont">
                                    <tr>
                                        <td>
                                            <input type="checkbox" class="input-address">
                                        </td>
                                        <td><p>张三</p></td>
                                        <td><p>湖北省武汉市江岸区长江日报108号长江日报报业集团</p></td>
                                        <td><p>13237778696</p></td>
                                        <td>
                                            <p class="address-operate"><a href="javascript:">修改</a> | <span>默认地址</span></p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="checkbox" class="input-address">
                                        </td>
                                        <td><p>张三</p></td>
                                        <td><p>湖北省武汉市江岸区长江日报108号长江日报报业集团</p></td>
                                        <td><p>13237778696</p></td>
                                        <td>
                                            <p class="address-operate"><a href="javascript:">修改</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="checkbox" class="input-address">
                                        </td>
                                        <td><p>张三</p></td>
                                        <td><p>湖北省武汉市江岸区长江日报108号长江日报报业集团</p></td>
                                        <td><p>13237778696</p></td>
                                        <td>
                                            <p class="address-operate"><a href="javascript:">修改</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="row">
                                <div class="col-sm-6 col-sm-offset-3">
                                    <div class="form-group">
                                        <div class="btn-groups btn-groups--address">
                                            <button class="btn btn-submit col-sm-6" type="button" id="btnConfirm">确认收货地址</button>
                                            <button class="btn btn-yellow-border col-sm-4 col-sm-offset-2" id="btnReturn">返回</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 修改收货地址 -->
                        <div class="fill-address fill-address--update" style="display:none" id="updateAddressDIV">
                            <div class="row"><h1 class="col-sm-3 address-title">修改收货地址</h1></div>
                            <div class="col-sm-6 col-sm-offset-3">
                                <form class="form-address form-horizontal clearfix form-address--center" role="form">
                                    <div class="form-group">
                                        <label for="receiver" class="col-sm-3 control-label">收货人:</label>
                                        <div class="col-sm-9 input-txt">
                                            <input type="text" class="form-control" id="receiver" name="receiver" placeholder="请输入收货人姓名">
                                        </div>
                                        <div class="line-alert line-alert--apply js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的姓名</div>
                                    </div>
                                    <div class="form-group">
                                        <label for="receiverPhone" class="col-sm-3 control-label">手机号:</label>
                                        <div class="col-sm-9 input-txt">
                                            <input type="text" class="form-control" id="receiverPhone" name="receiverPhone" placeholder="请输入手机号">
                                        </div>
                                        <div class="line-alert line-alert--apply js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的手机号</div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">收货地址:</label>
                                        <div class="col-sm-3 select-address">
                                            <select class="form-control">
                                                <option>湖北省</option>
                                                <option>湖北省</option>
                                                <option>湖北省</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-3 select-address">
                                            <select class="form-control">
                                                <option>武汉市</option>
                                                <option>武汉市</option>
                                                <option>武汉市</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-3 select-address">
                                            <select class="form-control">
                                                <option>武昌区</option>
                                                <option>江岸区</option>
                                                <option>江汉区</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="address" class="col-sm-3 control-label">详细地址:</label>
                                        <div class="col-sm-9 input-txt">
                                            <textarea class="col-sm-12 form-control--txt" id="address" name="address" placeholder="建议您如实填写详细收货地址"></textarea>
                                        </div>
                                        <div class="line-alert line-alert--apply js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的收货地址</div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-9 input-txt col-sm-offset-3">
                                            <input type="checkbox" class="" name="isDefault" value="1"><span class="control-label">设为默认地址</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="btn-groups btn-groups--address">
                                            <button class="btn btn-submit col-sm-6" type="button" id="btnSave">保存</button>
                                            <button class="btn btn-yellow-border col-sm-4 col-sm-offset-2" type="button" id="btnClose">关闭</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- 选定收货地址 -->
                    <div class="fill-address fill-address--confirm" id="addressConfirmedDIV">
                        <div class="col-sm-6 col-sm-offset-3">
                            <form class="form-address form-horizontal clearfix" role="form">
                                <div class="form-group">
                                    <ul class="receiverList">
                                        <li>收货人：张三</li>
                                        <li>收货地址：湖北省武汉市江岸区长江日报路108号</li>
                                        <li>手机号：13794498711</li>
                                    </ul>
                                </div>
                                <div class="form-group">
                                    <div class="btn-groups">
                                        <button class="btn btn-yellow-border col-sm-5" type="button" id="btnOthers">选择其他</button>
                                        <button class="btn btn-submit col-sm-5 col-sm-offset-2" type="button" id="btnCreate">使用新地址</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--商品列表-->
                <div class="row goodsList">
                    <table class="table table-header goodsList__header">
                        <colgroup>
                            <col style="width:35%">
                            <col style="width:10%">
                            <col style="width:25%">
                            <col style="width:10%">
                            <col style="width:15%">
                        </colgroup>
                        <tbody>
                            <tr>
                                <th>商品名称</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>金额</th>
                                <th>合计</th>
                            </tr>
                        </tbody>
                    </table>
                    <table class="table table-body goodsList__body">
                        <colgroup>
                            <col style="width:35%">
                            <col style="width:10%">
                            <col style="width:25%">
                            <col style="width:10%">
                            <col style="width:15%">
                        </colgroup>
                        <tbody class="table-body__header">
                            <tr>
                                <td colspan="4"><i class="iconfont"></i>楚才作文</td>
                            </tr>
                        </tbody>
                        <tbody class="table-body__cont text-center">
                            <tr>
                                <td>
                                    <div class="media">
                                        <a class="media-left" href="#">
                                            <img src="../../static/images/activity.png" alt="activity">
                                        </a>
                                        <div class="media-body">
                                            <h4 class="media-heading">
                                                <a href="#">楚才文萃小学卷</a>
                                            </h4>
                                        </div>
                                    </div>
                                </td>
                                <td><p>¥20</p></td>
                                <td>
                                    <p>
                                        <span class="numberbox numberbox--amount js-numberbox">
                                            <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--sub js-number-sub">-</a>
                                            <input class="pull-left numberbox__input js-number-input" pattern="[0-9]*" name="number" value="3">
                                            <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--plus js-number-plus">+</a>
                                        </span>
                                    </p>
                                </td>
                                <td><p>¥60</p></td>
                                <td rowspan="3" class="table-body__cont__btnTop">
                                    <p><em>¥187.00</em></p>
                                    <p><span>(含运费¥7.00)</span></p>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="media">
                                        <a class="media-left" href="#">
                                            <img src="../../static/images/activity.png" alt="activity">
                                        </a>
                                        <div class="media-body">
                                            <h4 class="media-heading">
                                                <a href="#">楚才文萃小学卷</a>
                                            </h4>
                                        </div>
                                    </div>
                                </td>
                                <td><p>¥20</p></td>
                                <td>
                                    <p>
                                        <span class="numberbox numberbox--amount js-numberbox">
                                            <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--sub js-number-sub">-</a>
                                            <input class="pull-left numberbox__input js-number-input" pattern="[0-9]*" name="number" value="3">
                                            <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--plus js-number-plus">+</a>
                                        </span>
                                    </p>
                                </td>
                                <td><p>¥60</p></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="media">
                                        <a class="media-left" href="#">
                                            <img src="../../static/images/activity.png" alt="activity">
                                        </a>
                                        <div class="media-body">
                                            <h4 class="media-heading">
                                                <a href="#">楚才文萃小学卷</a>
                                            </h4>
                                        </div>
                                    </div>
                                </td>
                                <td><p>¥20</p></td>
                                <td>
                                    <p>
                                        <span class="numberbox numberbox--amount js-numberbox">
                                            <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--sub js-number-sub">-</a>
                                            <input class="pull-left numberbox__input js-number-input" pattern="[0-9]*" name="number" value="3">
                                            <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--plus js-number-plus">+</a>
                                        </span>
                                    </p>
                                </td>
                                <td><p>¥60</p></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <div class="settleWrapper form-horizontal clearfix">
                        <div class="col-sm-9">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">留言：</label>
                                <div class="col-sm-9 memo-txt">
                                    <textarea class="form-control" name="memo"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="btn-groups">
                                <button class="btn btn-yellow-border btn-backCart">返回购物车</button>
                                <button class="btn btn-submit">去结算</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="logo-bottom visible-xs text-center">
                    <img src="../../static/images/bluelogo_cjrb.png" width="136" height="42" alt="cjrbLogo">
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer class="hidden-xs">
        <div class="container">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    版权所有 武汉楚才竞赛网 鄂ICP备14016248号COPYRIGHT @2013-2014 CHUCAI.GNJ.CN ALL RIGHT RESERVED
                    <img src="../../static/images/logo_cjrb.png" width="136" height="42" alt="cjrbLogo">
                </div>
            </div>
        </div>
    </footer>

    <script src="../../static/js/lib/jquery-1.9.1.min.js"></script>
    <script src="../../static/js/lib/bootstrap.min.js"></script>
    <script>
    $(function(){
        var createDIV = $("#addressCreateDIV");
        var modifyDIV = $("#addressModifyDIV");
        var updateDIV = $("#updateAddressDIV");
        var confirmDIV = $("#addressConfirmedDIV");

        $("#btnSave").on("click", function(){
            updateDIV.slideUp("fast");
        });

        $("#btnClose").on("click", function(){
            updateDIV.slideUp("fast");
        });

        $(".address-operate a").on("click", function(){
            updateDIV.slideDown("fast");

            var _this = $(this);
            var data = _this.closest("tr").find("td");
            $.each(data, function(i, d){
                if(i > 0){
                    console.log($(d).text());
                }
            });
        });

        $("#btnOthers").on("click", function(){
            createDIV.hide();
            modifyDIV.show();
            confirmDIV.hide();
        });

        $("#btnCreate").on("click", function(){
            createDIV.show();
            modifyDIV.hide();
            confirmDIV.hide();
        });

        $("#btnConfirm").on("click", function(){
            createDIV.hide();
            modifyDIV.hide();
            confirmDIV.show();
        });

        $("#btnReturn").on("click", function(){
            createDIV.hide();
            modifyDIV.hide();
            confirmDIV.show();
        });

        $("#btnCreateConfirm").on("click", function(){
            createDIV.hide();
            modifyDIV.hide();
            confirmDIV.show();
        });

    });
    </script>
</body>
</html>